import React, { useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
 
const defaultOption = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' },
      ],
    },
  ],
};
 
const PieChart = () => {
  const [option, setOption] = useState(defaultOption);
 
  useEffect(() => {
    // 假设这是异步获取option的过程
    fetchData().then(data => {
      setOption(data || defaultOption);
    });
  }, []);
 
  const fetchData = async () => {
    // 模拟异步获取option的过程
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          series: [
            {
              type: 'pie',
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' },
              ],
            },
          ],
        });
      }, 1000);
    });
  };
 
  return <ReactEcharts option={option} />;
};
 
export default PieChart;